
class CitySelect {
    /**
     * @description: newJsonData里面的参数,方便扩展
     * 请在城市数据请求成功之后执行(new)此构造函数
     * @param {tip} 提示选择
     * @param {cityData} 城市数据
     * @
     */
    constructor (newJsonData) {
        
        this.defult = {
            'tip' :'请选择大区',
            "callback": function () {},
            'cityData': [
                {
                    CountryId: 1,
                    CountryName: "华东区",
                    Province: [
                        {
                            ProvinceId: 1,
                            ProvinceName: "北京市",
                            City: [
                                {
                                    CityId: 1,
                                    CityName: "市辖区",
                                    CountyList: [
                                        {
                                            CountyId: 1,
                                            CountyName: "东城区",
                                            storeList: [
                                                {
                                                    storeId: 1,
                                                    personName: '二狗子1'
                                                },
                                                {
                                                    storeId: 1,
                                                    personName: '二狗子2'
                                                }
                                            ]
                                        },
                                        {
                                          CountyId: 2,
                                          CountyName: "西城区",
                                          storeList: [
                                              {
                                                  storeId: 1,
                                                  personName: '二狗子3'
                                              }
                                          ]
                                        },
                                        {
                                          CountyId: 3,
                                          CountyName: "朝阳区",
                                          storeList: [
                                              {
                                                  storeId: 1,
                                                  personName: '二狗子4'
                                              }
                                          ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    CountryId: 2,
                    CountryName: "华北区",
                    Province: [
                        {
                            ProvinceId: 7,
                            ProvinceName: "吉林省",
                            City: [
                                {
                                    CityId: 52,
                                    CityName: "长春市",
                                    CountyList: [
                                        {
                                            CountyId: 570,
                                            CountyName: "南关区",
                                            storeList: [
                                                {
                                                    storeId: 1,
                                                    personName: '二狗子'
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
        this.dataJson = this.mergeJsonObject(this.defult, newJsonData);        
    	this.template = `
        <main class="mainCityDark">
            <div class="Dark"></div>
            <div class="mainCity">
                <header>
                    <div class="leftNav">
                        <b class="tip">${this.dataJson.tip}</b>
                        <i class="selectTab">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </i>
                        <em style="display: none;" class="sure">确认</em>
                    </div>
                </header>
                <section id="section" class="sectionSingleCheckBox">
                    <ul class="isSingle isCheckBox" style="display: block;"></ul>
                    <ul class="isSingle isCheckBox" style="display: none;"></ul>
                    <ul class="isSingle isCheckBox" style="display: none;"></ul>
                    <ul class="isSingle isCheckBox" style="display: none;"></ul>
                    <ul class="isCheckBox style="display: none;""></ul>
                </section>
            </div>
        </main>`
        
        this.getAllVal = ''
        this.trypakerParents = ''
        this.trypakerParentsAul = ''
        this.trypakerParentsSelectTab = ''
        this.cityArr = []
        this.getValue = []
        this.init()
    }
    init () {
        this.addTemplate()
        this.theFirstData()
        this.addEventForUl()
        this.addEventForSure()
        this.addEventForTab()
        this.trypakerParents.getElementsByClassName("Dark")[0].addEventListener("click", function () {
            let pack = document.getElementById("trypakerParents")
            document.body.removeChild(pack)
        }, true)
    }
    addTemplate(){
        let newDiv = document.createElement("div");
        newDiv.id = "trypakerParents";
        newDiv.innerHTML = this.template;
        document.body.appendChild(newDiv);
        this.trypakerParents = document.querySelector("#trypakerParents")
        this.trypakerParentsAul = this.trypakerParents.getElementsByClassName('sectionSingleCheckBox')[0].getElementsByTagName('ul')
        this.trypakerParentsSelectTab = this.trypakerParents.getElementsByClassName('selectTab')[0]
    }
    addEventForUl () {
        let _this = this
        for (let i = 0; i < this.trypakerParentsAul.length; i++) {

            this.trypakerParentsAul[i].addEventListener('click', function (event) {
                if (this.className.indexOf("isSingle")>-1 && event.target.localName==="li") { // isSingle
                    let pro = (JSON.parse(event.srcElement.getAttribute("obj")))
                    if (i===0) {
                        let CountryId = (pro.CountryId)*1 // qu
                        let cityArr = []
                        for (let i = 0; i < _this.dataJson.cityData.length; i++) {
                            let thisForData = _this.dataJson.cityData[i]
                            if (thisForData.CountryId === CountryId) {
                                cityArr = thisForData.Province
                                break
                            }
                        }
                        _this.cityArr[0] = [pro]
                        _this.cityArr[1] = cityArr
                        _this.isContentChangeValue(i)
                        _this.getValue[0] = pro
                        let oProvince = _this.returnAli(cityArr, "ProvinceName", "ProvinceId")
                        _this.pushToUl(1, oProvince)
                        _this.whichContentShow(_this.trypakerParentsAul ,1)
                        _this.setSpanActText(0, pro.CountryName)
                        _this.trypakerParents.getElementsByClassName('tip')[0].style.display="none"
                    }
                    if (i===1) {
                        let City = ((_this.cityArr)[1][0]).City
                        _this.cityArr[2] = City
                        _this.isContentChangeValue(i)
                        _this.getValue[1] = pro
                        let oCity = _this.returnAli(City, "CityName", "CityId")
                        _this.pushToUl(2, oCity)
                        _this.whichContentShow(_this.trypakerParentsAul ,2)
                        _this.setSpanActText(1, pro.ProvinceName)
                    }
                    if (i===2) {
                        let City = (_this.cityArr[2])[0].CountyList
                        _this.cityArr[3] = City
                        _this.isContentChangeValue(i)
                        _this.getValue[2] = pro
                        let oCity = _this.returnAli(City, "CountyName", "CountyId")
                        _this.pushToUl(3, oCity)
                        _this.whichContentShow(_this.trypakerParentsAul ,3)
                        _this.setSpanActText(2, pro.CityName)
                    }
                    if (i===3) {
                        let City = (_this.cityArr[3])[0].storeList
                        _this.cityArr[4] = City
                        _this.isContentChangeValue(i)
                        _this.getValue[3] = pro
                        let oCity = _this.returnAli(City, "personName", "storeId")
                        _this.pushToUl(4, oCity)
                        _this.whichContentShow(_this.trypakerParentsAul ,4)
                        _this.setSpanActText(3, pro.CountyName)
                    }

                }
                
                if (this.className.indexOf("isCheckBox")>-1 && event.target.localName==="li") { // isCheckBox
                    if (event.srcElement.className === 'act') {
                        event.srcElement.className = ''
                    } else {
                        event.srcElement.className = 'act'
                    }
                    if (_this.isCheckBoxSelect()) {
                        _this.sureIsShow()
                    } else {
                        _this.sureIsShow(false)
                    }
                }
            })
        }
    }
    isContentChangeValue (index) {
        let aSpan = this.trypakerParentsSelectTab.getElementsByTagName('span')
        for (let i = index; i < aSpan.length; i++) {
            aSpan[i].innerHTML = ''
        }
        this.sureIsShow(false)
    }
    addEventForSure () {
        let _this = this
        this.trypakerParents.getElementsByClassName('sure')[0].addEventListener('click', function () {
            let getAllVal = {
                "selectCity": _this.getValue,
                "checkBoxData": _this.isCheckBoxSelect(true)
            }
            _this.getAllVal = getAllVal
            _this.dataJson.callback&&_this.dataJson.callback(_this.getAllVal)
            let pack = document.getElementById("trypakerParents")
            document.body.removeChild(pack)
        })
    }
    addEventForTab () {
        let _this = this
        let aSpan = this.trypakerParents.getElementsByClassName('selectTab')[0].getElementsByTagName('span')
        for (let i = 0; i < aSpan.length; i++) {
            aSpan[i].addEventListener('click', function () {
                 _this.whichContentShow(_this.trypakerParentsAul ,i)
                _this.setSpanActText(i, false)
            })
        }
    }
    isCheckBoxSelect (getVal=false) {
        let aLi = this.trypakerParents.getElementsByClassName('isCheckBox')[0].getElementsByTagName('li')
        let selectNum = 0
        let result = []
        for (let i = 0; i < aLi.length; i++) {
            if (aLi[i].className === 'act') {
                selectNum++
                result.push(JSON.parse(aLi[i].getAttribute('obj')))
            }
        }
        if (getVal) {
            return result
        } else {
            return (selectNum > 0) ? true : false;
        }
    }
    sureIsShow (bool=true) {
        if (bool) {
            this.trypakerParents.getElementsByClassName('sure')[0].style.display="block"
        } else {
           this.trypakerParents.getElementsByClassName('sure')[0].style.display="none"
        }
    }
    theFirstData () {
        let aLi = this.returnAli(this.dataJson.cityData, 'CountryName', 'CountryId')
        this.pushToUl(0, aLi)
    }
    pushToUl (index, aLi) {
        let aUl = this.trypakerParentsAul[index]
        aUl.innerHTML = aLi
    }
    setSpanActText (index, text) {
        let DOM = this.trypakerParentsSelectTab.getElementsByTagName('span')
        for (let i = 0; i < DOM.length; i++) {
            DOM[i].className = ''
        }
        DOM[index].className = 'act'
        if (text) {
            DOM[index].innerText = text
        }
    }
    returnAli (arr, name, id) {
        let oLi = ''
        for (let i in arr) {
            let data = arr[i]
            oLi += `<li obj='{"${id}":"${data[id]}","${name}":"${data[name]}"}'><i></i><span>${data[name]}</span></li>`
        }
        return oLi
    }
    whichContentShow (DOM, index) {
        for (let i = 0; i < DOM.length; i++) {
            DOM[i].style.display = 'none'
        }
        DOM[index].style.display = 'block'
    }
    mergeJsonObject (oldJson, newJson) {
        var result = {}
        for (let attr in oldJson) {
            result[attr] = oldJson[attr]
        }
        for (let attr in newJson) {
            result[attr] = newJson[attr]
        }
        return result;
    }
	
}
